<template>
  <div class="panel-right-container">
    <DataPanel
      class="panel-item-container"
      title="设备告警统计"
      :height="35"
      icon="/static/img/park/item/warning.webp"
    >
      <chart-view
        class="statistics-chart"
        :chart-option="ring3DOption"
        :auto-resize="true"
        height="100%"
        @chart-instance="initChartInstanceEvent"
      />
    </DataPanel>

    <DataPanel
      class="panel-item-container"
      title="设备预警"
      :height="35"
      icon="/static/img/park/item/early-warning.webp"
    >
      <dv-scroll-board
        class="scroll-board--warning"
        :config="warnDvScrollBoardConf"
      />
    </DataPanel>

    <DataPanel
      class="panel-item-container"
      title="检修记录"
      :height="30"
      icon="/static/img/park/item/record.webp"
    >
      <dv-scroll-board class="scroll-board" :config="recordDvScrollBoardConf" />
    </DataPanel>
  </div>
</template>

<script>
import { ring3DOptionHandler, initChartInstance } from "./configs/ring-3d.conf";
import DataPanel from "@/components/park/dataPanel.vue";
import RadioGroup from "@/components/RadioGroup/RadioGroup.vue";

//#region 临时展示数据--START
import {
  generateAlarmStatisticsListData,
  generateEquipmentWarnData,
  generateMaintenanceRecordsData
} from "../../temp/data";
// #endregion 临时展示数据--END

// dataV 公共配置
const dvScrollBoardCommConf = {
  headerBGC: "rgba(145, 169, 178, 0.30)",
  oddRowBGC: "rgba(145, 169, 178, 0.10)",
  evenRowBGC: "rgba(0, 0, 0, 0.66)",
  rowNum: 5,
  align: ["center", "center", "center", "center", "center"],
  columnWidth: [55, 100, 142, 82]
};

const dvScrollBoardWarnConf = {
  header: ["序号", "设备名称", "位置", "设备状态"],
  ...dvScrollBoardCommConf
};

const dvScrollBoardRecordConf = {
  header: ["序号", "设备名称", "时间", "检修人"],
  ...dvScrollBoardCommConf
};

export default {
  name: "RightPanel",
  components: {
    DataPanel,
    RadioGroup
  },
  data() {
    return {
      // 设备告警统计相关数据
      alarmStatisticsList: [],

      // 设备预警相关数据
      warnDvScrollBoardConf: {
        data: [],
        ...dvScrollBoardWarnConf
      },

      // 检修记录相关数据
      recordDvScrollBoardConf: {
        data: [],
        ...dvScrollBoardRecordConf
      }
    };
  },

  computed: {
    ring3DOption() {
      return ring3DOptionHandler(this.alarmStatisticsList);
    }
  },

  created() {
    // 获取相关数据方法
    this.getEquipmentWarnData();
    this.getMaintenanceRecordsData();
    this.getAlarmStatisticsListData();
  },

  methods: {
    /**
     * 初始化 Chart 实例事件
     * @param {Object} instance
     */
    initChartInstanceEvent(instance) {
      ring3DOptionHandler(this.alarmStatisticsList, instance);
    },

    /**
     * 获取设备告警统计数据方法
     */
    getAlarmStatisticsListData() {
      this.alarmStatisticsList = generateAlarmStatisticsListData();
    },

    /**
     * 获取设备预警数据方法
     */
    getEquipmentWarnData() {
      const res = generateEquipmentWarnData();
      const warnList = this.warnDvScrollBoardDataConfHandler(res);
      this.warnDvScrollBoardConf = {
        data: warnList,
        ...dvScrollBoardWarnConf
      };
    },

    /**
     * 获取检修记录数据方法
     */
    getMaintenanceRecordsData() {
      const res = generateMaintenanceRecordsData();
      const recordsList = this.recordDvScrollBoardDataConfHandler(res);
      this.recordDvScrollBoardConf = {
        data: recordsList,
        ...dvScrollBoardRecordConf
      };
    },

    /**
     * 设备预警 dataV 轮播表格数据处理方法
     * @param {Object} data 传入需要处理的数据
     * @return {Array} 处理后的数据
     */
    warnDvScrollBoardDataConfHandler(data) {
      const reminderList = [];
      const stateList = [
        {
          text: "正常",
          color: "rgba(135, 205, 255, 1)"
        },
        {
          text: "故障",
          color: "rgba(255, 184, 156, 1)"
        }
      ];
      data.forEach((item, index) => {
        const reminderItemData = [
          `<span class="scroll-board-text">${index + 1}</span>`,
          `<span class="scroll-board-text">${item.name}</span>`,
          `<span class="scroll-board-text">${item.position}</span>`,
          `<span class="scroll-board-text" style="color: ${
            stateList[item.state].color
          }">${stateList[item.state].text}</span>`
        ];
        reminderList.push(reminderItemData);
      });

      return reminderList;
    },

    /**
     * 检修记录 dataV 轮播表格数据处理方法
     * @param {Object} data 传入需要处理的数据
     * @return {Array} 处理后的数据
     */
    recordDvScrollBoardDataConfHandler(data) {
      const reminderList = [];
      data.forEach((item, index) => {
        const reminderItemData = [
          `<span class="scroll-board-text">${index + 1}</span>`,
          `<span class="scroll-board-text">${item.name}</span>`,
          `<span class="scroll-board-text">${item.date}</span>`,
          `<span class="scroll-board-text">${item.user}</span>`
        ];
        reminderList.push(reminderItemData);
      });

      return reminderList;
    }
  }
};
</script>

<style lang="less" scoped>
.panel-right-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .panel-item-container {
    height: 100%;

    // 待办提醒区域样式
    .scroll-board,
    .scroll-board--warning {
      width: 100%;
      height: 100%;

      /deep/ .scroll-board-text {
        font-size: 0.75rem;
      }
    }

    .scroll-board--warning {
      height: 90%;
    }
  }
}
</style>
